<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:wug="http://wug.jp/2009/wug"
      wug:root="jp.wug.samples.hangman.Hangman">
<head>
    <title>Showcase - Hangman</title>
    <link rel="stylesheet" href="styles/main.css" type="text/css"
          media="all"/>
    <link rel="stylesheet" href="styles/styles.css" type="text/css"/>
    <script src="scripts/utils.js" type="text/javascript"></script>
</head>
<body>
<table bgcolor="green">
    <tr>
        <td><img alt="Hangman" src="images/hangman.png" width="197"
                 height="50" border="0"/></td>
        <td width="70" align="right"><!-- Guesses Left -->
            <div id="updateGuessLeftDiv"><img wug:if="hasGuessesLeft"
                                              wug:attr="src:guessesLeftAsImage,alt:guessesLeft"
                                              alt="No. Guesses Left" src="images/Chalkboard_5.png" width="20"
                                              height="20" border="0"/></div>
        </td>
        <td><img alt="Guesses Left" src="images/guesses-left.png"
                 width="164" height="11" border="0"/></td>
    </tr>
    <tr>
        <td></td>
        <td align="left"><!-- Display Scaffold -->
            <div id="updateScaffoldDiv"><img
                    wug:attr="src:scaffoldAsImage,alt:scaffoldAsString"
                    src="images/scaffold_5.png" border="0" alt="5"/></div>
        </td>
        <td></td>
    </tr>
    <tr>
        <td width="160">
            <p align="right"><img alt="Current Guess" src="images/guess.png"
                                  align="middle" width="127" height="20" border="0"/></p>
        </td>
        <td><!-- Display Vocab  -->
            <div id="updateVocabDiv">
                <wug:e wug:if="gameEnded">
                    <wug:e wug:render="renderVocab,getVocabAt">
                        <img wug:attr="alt:altValue,src:imageURL" height="36" alt="A"
                             src="images/Chalkboard_A.png" width="36" border="0"/>
                    </wug:e>
                </wug:e>
                <wug:e wug:if-not="gameEnded">
                    <wug:e wug:render="renderVocab,getVocabAt">
                        <img wug:if="guessed" wug:attr="alt:altValue,src:imageURL"
                             height="36" alt="_" src="images/Chalkboard__.png" width="36"
                             border="0"/>
                        <img wug:if-not="guessed" height="36" alt="_"
                             src="images/Chalkboard_underscroll.png" width="36" border="0"/>
                    </wug:e>
                </wug:e>
            </div>
        </td>
    </tr>
    <tr>
        <td valign="top">
            <p align="right"><img alt="Choose" src="images/choose.png"
                                  height="20" width="151" border="0"/></p>
        </td>
        <td width="330"><!-- Show Characters Available -->
            <div id="updateCharacterAvailableDiv">
                <wug:e wug:if="gameEnded">
                    <img wug:if="isWin" src="images/you-win.png" width="341" height="44"
                         alt=""/>
                    <img wug:if-not="isWin" src="images/you-lose.png" width="381"
                         height="44" alt=""/>
                    <a wug:action="startNewGame" href="hangman.html"> <img
                            src="images/start.png" width="250" height="43" alt=""/> </a>
                </wug:e>
                <wug:e wug:if-not="gameEnded">
                    <wug:e wug:render="renderAvailableCharacters,getVocab">
                        <a wug:action="guess" href="hangman.html"><img
                                wug:attr="src:imageURL,alt:altValue" height="36" alt="_"
                                src="images/Chalkboard__.png" width="36" border="0"/></a>
                    </wug:e>
                </wug:e>
            </div>
        </td>
    </tr>
    <tr>
        <td></td>
    </tr>
</table>
<span>
    HANGMAN is a port of the example application in <a href="http://struts.apache.org/">Apache Struts</a>.<br/>
    See <a href="LICENSE.txt">LICENSE.txt</a> for detail.
</span>
</body>
</html>